<template>
  <div class="function-area">
    <div class="function-title-area">
      <div class="function-area-title-piece"></div>
      <div class="function-area-title">邀请奖励配置</div>
      <div class="function-area-switch">
        <el-switch v-model="invite_reward_config.is_open_invite"></el-switch>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="config-desc">
      <div>邀请奖励配置</div>
      <p>可设置最多7级邀请奖励礼品、可设置用户邀请人数越多，礼品越好。根据用户最 终邀请人数发放对应等级的奖品。
        若有用户报名，则“需邀请人数”不能改动，奖励等级不可删除，仅可增加奖励等级，请谨慎配置。</p>
    </div>
    <div class="reward-title" v-if="invite_reward_config.is_open_invite">
      <div class="title">奖励升级福利标题</div>
      <div>
        <el-input size="small" v-model="invite_reward_config.title"
                  placeholder="请输入奖励升级福利标题" maxlength="15" show-word-limit></el-input>
      </div>
    </div>
    <div class="content" v-if="invite_reward_config.is_open_invite">
      <div class="condition-title">邀请成功计算方式</div>
      <div class="condition">
        <div :class="{
          conditionLeftSelected: invite_reward_config.compute_way === 'ruleA',
          conditionLeft: invite_reward_config.compute_way !== 'ruleA'}" @click="rewardRule('ruleA')">
          <div>购买模式</div>
          <p>被邀请人购买拼团商品后计算为邀请成功</p>
          <i v-if="invite_reward_config.compute_way === 'ruleA'" class="el-icon-success selected-icon"></i>
        </div>
        <div :class="{
          conditionRightSelected: invite_reward_config.compute_way === 'ruleB',
          conditionRight: invite_reward_config.compute_way !== 'ruleB'}" @click="rewardRule('ruleB')">
          <div>查看活动模式</div>
          <p>被邀请人进入查看活动计算为邀请成功</p>
          <i v-if="invite_reward_config.compute_way === 'ruleB'" class="el-icon-success selected-icon"></i>
        </div>
      </div>
    </div>
    <div class="prezzie-list" v-if="invite_reward_config.is_open_invite">
      <template v-for="(item, index) in invite_reward_config.prize_list">
        <div class="prezzie-card">
          <div class="first-row">
            <div class="prezzie-card-sort">{{ index + 1 }}级礼品</div>
            <div class="prezzie-card-button">
              <el-button v-if="invite_reward_config.prize_list.length > 1 && index >= 1" type="text" class="button-style" @click="removePrezzie(index)">
                <i class="el-icon-error"></i>
              </el-button>
            </div>
          </div>
          <div class="prezzie-item">
            <div class="prezzie-img">
              <SingleImageUpload :isShowTip="false" v-model="item.cover"/>
            </div>
            <div class="prezzie-info-config">
              <div class="prezzie-info-config-option">
                <span class="ahead-text">累计邀请</span>
                <el-input style="width: 30%; padding-left: 10px;" v-model="item.requirement_invite_number" type="number" min="0"></el-input>
                <span class="behind-text">人,可免费获得</span>
              </div>
              <div class="prezzie-info-config-option">
                <span class="ahead-text">价值￥</span>
                <el-input style="width: 30%; padding-left: 10px;" v-model="item.price" type="number" min="0"></el-input>
                <span class="behind-text">奖品</span>
              </div>
              <div class="prezzie-info-config-option">
                <el-input style="width: 80%;" v-model="item.title" maxlength="24" show-word-limit></el-input>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div class="add-prezzie-button" v-if="invite_reward_config.is_open_invite">
      <el-button class="prezzie-button" icon="el-icon-plus" @click="addPrezzie">添加奖励等级</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "InviteRewardConfig",
  props: ['invite_reward_config'],
  data() {
    return {

    }
  },
  methods: {
    /** 移除奖励等级 */
    removePrezzie(index) {
      this.$emit('remove-prezzie-item',index);
    },
    /** 添加奖励等级 */
    addPrezzie() {
      this.$emit('add-prezzie-item');
    },
    /** 修改计算方式 */
    rewardRule(val) {
      this.$emit('edit-reward-rule',val);
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-divider--horizontal {
  margin: 5px;
}

::v-deep .el-input__inner {
  height: 25px;
  line-height: 25px;
}

.function-area {
  margin-top: 10px;
  padding-left: 10px;
  .function-title-area {
    display: flex;
    position: relative;
    .function-area-title-piece {
      width: 5px;
      height: 30px;
      background-color: #2254f5;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    .function-area-title {
      width: 100%;
      height: 40px;
      font-size: 18px;
      font-weight: bold;
      color: #2254f5;
      padding-left: 10px;
      align-content: center;
    }
    .function-area-switch {
      width: 120px;
      align-content: center;
      text-align: center;
    }
  }
  .config-desc {
    div {
      padding: 20px 0 5px 0;
      font-size: 14px;
      font-weight: bold;
    }
    p {
      font-size: 12px;
      color: rgba(0,0,0,0.5);
    }
  }
  .reward-title {
    font-size: 14px;
    .title {
      padding: 10px 0 10px 0;
      font-size: 14px;
      font-weight: bold;
    }
  }
  .content {
    width: 100%;
    margin: 15px 0;
    .condition-title {
      margin: 10px 0;
      font-size: 14px;
      font-weight: bold;
    }
    .condition {
      display: flex;
      gap: 20px;
      .conditionLeft {
        width: 50%;
        padding: 10px;
        background-color: #f6f7f9;
        border: 1.5px solid #f6f7f9;
        border-radius: 5px;
        div {
          font-size: 14px;
          font-weight: bold;
        }
        p {
          font-size: 14px;
        }
      }

      .conditionLeftSelected {
        width: 50%;
        padding: 10px;
        background-color: #ecf2ff;
        border: 1.5px solid #2254f5;
        border-radius: 5px;
        position: relative;
        div {
          font-size: 14px;
          font-weight: bold;
        }
        p {
          font-size: 14px;
        }
        .selected-icon {
          color: #2254f5;
          width: 10px;
          height: 10px;
          position: absolute;
          right: 5px;
          top: 0;
        }
      }

      .conditionRight {
        width: 50%;
        padding: 10px;
        background-color: #f6f7f9;
        border: 1.5px solid #f6f7f9;
        border-radius: 5px;
        div {
          font-size: 14px;
          font-weight: bold;
        }
        p {
          font-size: 14px;
        }
      }

      .conditionRightSelected {
        width: 50%;
        padding: 10px;
        background-color: #ecf2ff;
        border: 1.5px solid #2254f5;
        border-radius: 5px;
        position: relative;
        div {
          font-size: 14px;
          font-weight: bold;
        }
        p {
          font-size: 14px;
        }
        .selected-icon {
          color: #2254f5;
          width: 10px;
          height: 10px;
          position: absolute;
          right: 5px;
          top: 0;
        }
      }
    }
  }
  .prezzie-list {
    .prezzie-card {
      width: 100%;
      height: 150px;
      background-color: #f6f7f9;
      margin-top: 10px;
      border-radius: 5px;
      .first-row {
        display: flex;
        .prezzie-card-sort {
          width: 60px;
          height: 25px;
          background-color: #ff4d20;
          font-size: 12px;
          color: white;
          border-radius: 5px 0;
          text-align: center;
          align-content: center;
        }
        .prezzie-card-button {
          width: calc(100% - 60px);
          text-align: right;
          color: #81878e;
          .button-style {
            padding: 0;
            color: #74777b;
          }
        }
      }
      .prezzie-item {
        display: flex;
        .prezzie-img {
          width: 120px;
          height: 120px;
          align-content: center;
          text-align: center;
        }
        .prezzie-info-config {
          font-size: 14px;
          width: calc(100% - 120px);
          align-content: center;
          margin: 10px 5px;
          .prezzie-info-config-option {
            padding: 2px 0;
            .ahead-text {

            }
            .behind-text {
              padding-left: 10px;
            }
          }
        }
      }
    }
  }
  .add-prezzie-button {
    width: 100%;
    text-align: center;
    align-content: center;
    padding: 10px 0;
    .prezzie-button {
      width: 100%
    }
  }
}

</style>
